<template>
  <div class="container">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('没有更多数据了')"
              :error.sync="error"
              :error-text="$t('没有更多数据了')"
              @load="getBibiOrderInfo"
            >
              <van-cell v-for="(item, index) in bibiOrderList" :key="index">
                <div
                  class="itemBox"
                >
                  <!-- div class="topInner">
                    <p class="ttl">{{item.name}}</p>
                    <p class="note" @click="cancelOrder(item.id)" v-if="item.status==1">
                      {{ $t("提前赎回") }}
                    </p>
                  </div> -->
                  <div class="">
					  <div class="item">
					    <p class="ttl" >
					      {{ $t("币种") }} :   <span class="text"> {{item.bi_name}}</span>
					    </p>
					  </div>
                   
                    <div class="item">
                      <p class="ttl" >
                        {{ $t("购买时间") }} :   <span class="text"> {{ formatTime(item.addtime, "yyyy-MM-dd HH:mm") }}</span>
                      </p>
                    </div>
					<div class="item">
					  <p class="ttl" >
					    {{ $t("上市时间") }} :   
						<span class="text" v-if="item.status != 3"> {{ formatTime(item.starttime, "yyyy-MM-dd HH:mm") }}</span>
						<span class="text" v-if="item.status == 3"> {{ $t("等待审核") }}</span>
					  </p>
					</div>
					<div class="item">
					  <p class="ttl" >
					    {{ $t("结束时间") }} :   
						<span class="text" v-if="item.status != 3"> {{ formatTime(item.sendtime, "yyyy-MM-dd HH:mm") }}</span>
						<span class="text" v-if="item.status == 3"> {{ $t("等待审核") }}</span>
					  </p>
					</div>
                    <div class="item">
                      <p class="ttl" >
                        {{ $t("购买数量") }} :   <span class="text"> {{ item.num }}{{item.bi_name}}</span>
                      </p>
                    </div>
					<div class="item">
					  <p class="ttl" >
					    {{ $t("通过数量") }} :  
						 <span class="text" v-if="item.status != 3"> {{ item.num1 }}{{item.bi_name}}</span>
						 <span class="text" v-if="item.status == 3"> {{ $t("等待审核") }}</span>
					  </p>
					</div>
                    <div class="item">
                      <p class="ttl" >
                        {{ $t("购买价格") }} :   <span class="text"> {{ item.money }} USD</span>
                      </p>
                    </div>
                    
                    
                    <div class="item" style="color: red;">
                      <p class="ttl" >
                        {{ $t("状态") }} :  
                        <span class="text" v-if="item.status == 3"> 
                          {{ $t("等待审核") }}
                        </span>
                        <span class="text" v-if="item.status == 2">
                          {{ $t("已结束") }}
                        </span>
                        <span class="text" v-if="item.status == 1">
                          {{ $t("持有中") }}
                        </span>
						<span class="text" v-if="item.status == 4">
						  {{ $t("拒绝申请") }}
						</span>
                      </p>
                    </div>
					
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
import { formatTime } from "@/utils/tools";
export default {
  name: "financialTradeList",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("我的申购"),
        close: false,
        btn: "",
      },
      bibiOrderList: [],
      active: 0,
      loading: false,
      finished: false,
      error: false,
      refreshing: false,
      pageSize: 10,
      pageNumber: 0,
      totalElements: 0,
    };
  },
  mounted() {},
  methods: {
    formatTime,
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.pageNumber = 0;
      this.bibiOrderList = [];
      this.getBibiOrderInfo();
    },
    // 撤销订单
    cancelOrder(id) {
      let data = {
        id: id,
      };
      this.$toast.loading({
        duration: 0,
        message: "",
        forbidClick: true,
      });
      $postAxios(api.cancelMiningOrder, data, (res) => {
        this.$toast.clear();
        if (res.code == 0) {
          this.$toast(this.$t("赎回成功"));
          this.pageNumber = 0;
          this.bibiOrderList = [];
          this.getBibiOrderInfo();
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    // 切换tab
    changetab() {
      this.pageNumber = 0;
      this.bibiOrderList = [];
      this.getBibiOrderInfo();
    },
    // 获取币币订单数据
    getBibiOrderInfo() {
      if (this.refreshing) {
        this.bibiOrderList = [];
        this.pageNumber = 0;
        this.refreshing = false;
      }
      let status = this.active + 1;
      let data = {
        page: this.pageNumber,
        rows: this.pageSize,
        status: status,
      };
      $postAxios(api.getUserNewCoinOrderList, data, (res) => {
        if (res.code == 0) {
          this.totalElements = res.count;
          if (this.pageNumber == 0) {
            this.bibiOrderList = res.data;
          } else {
            this.bibiOrderList = this.bibiOrderList.concat(res.data);
          }
          this.pageNumber++;
          this.loading = false;
          if (this.bibiOrderList.length == this.totalElements) {
            this.finished = true;
          }
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f6fb;
  .content {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  ::v-deep.van-tabs {
    height: 100%;
    .van-tabs__wrap {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
    }
    .van-tabs__content {
      width: 100%;
      height: calc(100% - 40px);
      position: absolute;
      left: 0;
      top: 40px;
      bottom: 0;
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  .button {
    width: 100%;
    left: 30%;
    bottom: 20px;
    z-index: 10;
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    text-align: center;
    border-radius: 5px;
    background-color: #FD986B;
  }
  .content {
    padding: 10px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .itemBox {
      margin-bottom: 10px;
      padding: 0;
      border-radius: 4px;
      background-color: #fff;
      .topInner {
        margin-bottom: 10px;
        padding: 0 10px;
        color: #000;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .btmInner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
          width: 27%;
          color: #000;
          font-size: 14px;
          flex-shrink: 0;
          text-align: center;
          flex-direction: column;
          &:first-child {
            min-width: 47%;
          }
        }
      }
    }
  }
}
</style>